<template>
  <div class="app-container">
    <div id="cesiumContainer" style="height: 100%" />
  </div>
</template>

<script>
import { initViewer } from '@/utils/cesiumUtils'
import CreateFreeLine from '@/views/FreeLine/CreateFreeLine'
export default {
  data() {
    return {
      viewer: null,
      data: []
    }
  },
  created() {
  },
  mounted() {
    this.viewer = initViewer('cesiumContainer')
    console.log(this.viewer)
    // this.startDraw()
  },
  methods: {
    startDraw() {
      CreateFreeLine(this.viewer, [],
        {
          color: Cesium.Color.BLUE,
          width: 2,
        },
        (e) => {
          console.log(e);
        }
      );
    },
    initCamera() {
      this.viewer.camera.flyTo({
        destination: window.Cesium.Cartesian3.fromDegrees(
          110.62898254394531,
          40.02804946899414,
          10000.0
        ), //相机飞入点
      });
    },
    getLocation() {
      let handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
      handler.setInputAction(function (event) {
        let earthPosition = this.viewer.scene.pickPosition(event.position);
        if (Cesium.defined(earthPosition)) {
          let cartographic = Cesium.Cartographic.fromCartesian(earthPosition);
          let lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
          let lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);
          let height = cartographic.height.toFixed(2);
          console.log(earthPosition, {
            lon: lon,
            lat: lat,
            height: height,
          });
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
  }
}
</script>
